<template>
  <div class="front-end-main">
    <div class="survivor_ban">
      <div class="sur_ban_item" v-for="(item, index) in boInfo.hunterBanNumber ?? []" :key="index">
        <n-icon :size="16" color="#9d9a9b" v-show="item">
          <LockClosed />
        </n-icon>
        <div class="pic" :style="{
          backgroundImage: `url(${banObject[`banHun${index + 1}` as BanObjectKey]})`
        }"></div>
      </div>
    </div>
    <div class="hunter_ban">
      <div class="hun_ban_item" v-for="(item, index) in boInfo.survivorBanNumber ?? []" :key="index">
        <n-icon :size="16" color="#9d9a9b" v-show="item">
          <LockClosed />
        </n-icon>
        <div class="pic" :style="{
          backgroundImage: `url(${banObject[`banSur${index + 1}` as BanObjectKey]})`
        }"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts' name="FrontEndMain">
import { LockClosed } from '@vicons/ionicons5';
import { BOStepConfig } from '@/common/nomalRules.ts';
import { baseOpacityImage } from '@/utils';
import BoardChannel from '@/utils/boardChannel';
import storeHelper from '@/utils/TauriStore';
const props = defineProps<{
  'gameInfo': IncSessionGameInfo
}>();

const channel = new BoardChannel('bp-system');
channel.on('bpCharChange', (pic: PictureInfo) => {
  if (!(pic.key && pic.key in banObject)) return;
  import(`@/assets/images/${pic.filePath}/${pic.path}.png`).then(res => {
    banObject[pic.key as BanObjectKey] = res.default;
  })
});
channel.on('clearBp', () => {
  clearPictures();
})
type BanObjectKey = keyof typeof banObject;
const banObject = reactive({
  banHun1: baseOpacityImage,
  banHun2: baseOpacityImage,
  banHun3: baseOpacityImage,
  banSur1: baseOpacityImage,
  banSur2: baseOpacityImage,
  banSur3: baseOpacityImage,
  banSur4: baseOpacityImage
});
const clearPictures = () => {
  Object.assign(banObject, {
    banHun1: baseOpacityImage,
    banHun2: baseOpacityImage,
    banHun3: baseOpacityImage,
    banSur1: baseOpacityImage,
    banSur2: baseOpacityImage,
    banSur3: baseOpacityImage,
    banSur4: baseOpacityImage
  });
}
const boInfo = ref<BOStepConfig>({});
// 初始化获取ban位
const _init = async () => {
  try {
    const boStep = await storeHelper.get('use_step_config');
    if (boStep && typeof boStep === 'object') {
      boInfo.value = boStep[props.gameInfo.session] ?? {};
    }
  } catch (error) {
    console.log(error);
  }
}
const { stop } = watch(() => props.gameInfo.session, async (newVal) => {
  if (newVal) {
    clearPictures();
    await _init();
  }
}, { immediate: true });

onUnmounted(() => {
  stop();
  channel.off('bpCharChange');
  channel.off('clearBp');
});
</script>
<style scoped lang='scss'>
.front-end-main {
  width: 100%;
  height: 100%;
  background: $screen-color;
  position: relative;

  .survivor_ban {
    position: absolute;
    width: 419px;
    bottom: 0;
    left: 0;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    gap: 5px;

    .sur_ban_item {
      width: 32px;
      height: 32px;
      border: 2px solid #9d9a9b;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #010000;
      border-radius: 2px;
      position: relative;

      .pic {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        // background-size: cover;
        transition: background-image 0.3s;
        background-size: auto 100%;
        /* 高度填满，宽度按比例缩放 */
        background-position: center;
        /* 让图片居中 */
        background-repeat: no-repeat;
        filter: grayscale(100%);
      }
    }
  }

  .hunter_ban {
    position: absolute;
    width: 419px;
    bottom: 0;
    right: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5px;
    gap: 5px;

    .hun_ban_item {
      width: 32px;
      height: 32px;
      border: 2px solid #9d9a9b;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #010000;
      border-radius: 2px;
      position: relative;

      .pic {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        filter: grayscale(100%);
        transition: background-image 0.3s;
      }
    }
  }
}
</style>